<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>古画商城-登录</title>
    <style type="text/css">
        /*form {*/
        /*    display: block;*/
        /*    height: auto;*/
        /*    width: 450px;*/
        /*    margin: 100px auto;*/
        /*}*/
        /*form table tr {*/
        /*    height: 40px;*/
        /*}*/
        /*form table tr td {*/
        /*    height: 40px;*/
        /*    width: 280px;*/
        /*    line-height: 40px;*/
        /*}*/
        /*form table tr td input {*/
        /*    height: 32px;*/
        /*    border: 1px solid #BABABA;*/
        /*    border-radius: 6px;*/
        /*}*/
        /*.alignRight {*/
        /*    text-align: right;*/
        /*    line-height: 40px;*/
        /*    font-size: 16px;*/
        /*    font-family: "Monaco";*/
        /*    width: 200px;*/
        /*}*/
        /*.submit {*/
        /*    display: block;*/
        /*    height: 40px;*/
        /*    width: 250px;*/
        /*    color: white;*/
        /*    font-weight: bold;*/
        /*    font-size: 18px;*/
        /*    background-color: #98ECAC;*/
        /*    border-radius: 8px;*/
        /*    margin: 15px auto;*/
        /*}*/

        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .login-container-field {
            border-radius: .25rem;
            border: 1px solid #ccc;
        }

        #register-form {
            padding: 12px;
        }

        .login-container {
            height: 100% !important;
            width: 100% !important;
            display: flex;
            justify-content: flex-end;
            overflow: hidden;
            position: relative;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 2px 21px 1px rgba(56, 127, 247, 0.2);
        }

        .login-container .left {
            flex: 600 !important;
            background-image: url("${pageContext.request.contextPath}/images/background.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .login-container .right {
            flex: 382;
            min-width: 480px;
            height: 100%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .login-container .right .card {
            display: flex;
            align-items: center;
            border: none;
            width: 100%;
        }

        .login-container .right .card .card-title {
            padding: 20px 0;
            color: #141414;
            font-weight: 600;
        }

        .login-container .right .card .card-body {
            padding: 20px;
            width: 90%;
        }

        .login-container .right .form-btn {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .login-container .right .form-btn .login-container-btn {
            width: 100%;
            margin-bottom: 12px;
        }

        .login-container .right .form-btn .login-container-btn.btn-primary {
            background-color: #57a5dd;
            border-color: #57a5dd;
        }
    </style>
</head>
<body>
<jsp:include page="css.jsp"/>
<div class="login-container">
    <div class="left"></div>
    <div class="right">
        <div class="card">
            <div class="card-title">
                <h2>古画商城</h2>
            </div>
            <div class="card-body">
                <form action="login.action" method="post">
                    <div class="form-group row login-container-field">
                        <label for="input-username" class="col-sm-2 col-form-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control-plaintext" id="input-username" name="username" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div class="form-group row login-container-field">
                        <label for="input-password" class="col-sm-2 col-form-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control-plaintext" id="input-password" name="password" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <div class="form-group row login-container-field">
                        <label class="col-sm-2 col-form-label">角色</label>
                        <div class="col-sm-10">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="role" id="input-role-admin" value="1" checked>
                                <label class="form-check-label" for="input-role-admin">
                                    管理员
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="role" id="input-role-user" value="0">
                                <label class="form-check-label" for="input-role-user">
                                    用户
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row form-btn">
                        <button id="login-btn" type="submit" class="btn btn-primary login-container-btn">登录</button>
                        <button type="button" class="btn btn-outline-secondary login-container-btn" data-toggle="modal"
                                data-target="#register-model">注册
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <%-- 注册模态框，在注册按钮上绑定data-target="#register-model"，register-model与该模态框的id对应 --%>
    <div class="modal fade" id="register-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
         data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">注册新用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="register-form" action="register.action" method="post">
                        <div class="form-group row login-container-field">
                            <label for="register-username" class="col-sm-2 col-form-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control-plaintext" id="register-username" name="username" placeholder="请输入用户名" required>
                            </div>
                        </div>
                        <div class="form-group row login-container-field">
                            <label for="register-password" class="col-sm-2 col-form-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control-plaintext" id="register-password" name="password" placeholder="请输入密码" required>
                            </div>
                        </div>
                        <div class="form-group row login-container-field">
                            <label for="register-name" class="col-sm-2 col-form-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control-plaintext" id="register-name" name="name" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group row login-container-field">
                            <label for="register-age" class="col-sm-2 col-form-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control-plaintext" id="register-age" name="age" placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group row login-container-field">
                            <label class="col-sm-2 col-form-label">角色</label>
                            <div class="col-sm-10">
                                <div class="form-check">
                                    <input class="register form-check-input" type="radio" name="role" id="register-role-admin" value="1" checked>
                                    <label class="form-check-label" for="register-role-admin">
                                        管理员
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="register form-check-input" type="radio" name="role" id="register-role-user" value="0">
                                    <label class="form-check-label" for="register-role-user">
                                        用户
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                    <button type="button" id="register-btn" class="btn btn-primary">我要注册</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#register-btn").click(function (event) {
            let username = $("#register-username").val();
            let password = $("#register-password").val();
            if (!username || !password) {
                alert("请完善信息！");
                return;
            }
            $("#register-form").submit();
        });

        // 注册模态框隐藏的时候重置注册表单
        $('#register-model').on('hidden.bs.modal', function (event) {
            document.getElementById("register-form").reset();
        });
        // 注册模态框隐藏的时候重置注册表单
        $('#register-model').on('show.bs.modal', function (event) {
            document.getElementById("register-form").reset();
        });
    });
</script>
</body>
</html>
